<template>
	<view class="detail-page">
		<msg :lists="resultList" :rowList="rowList" tagType="index" imgSrc="/static/icon24.png"
			@onImgClick="onImgClick"></msg>

		<u-popup :show="show" mode="center" :safe-area-inset-bottom="false" @close="close" @open="open">
			<video :src="videoData.src" controls class="video" v-if="videoShow"></video>
		</u-popup>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	import msg from '@/components/msgTemplate/index.vue';
	import hwVehicleVideoApi from '@/api/hwVehicle/hwVehicleVideoApi'
	let that = null
	export default {
		components: {
			msg
		},
		data() {
			return {
				show: false,
				videoShow: false,
				vehicleId: "",
				startTime: "",
				endTime: "",
				vehicleNum: "",
				channelNo: "",
				resultList: [],
				videoData:{
					src:""
				},
				rowList: [{
						name: '视频通道',
						value: 'channelName'
					},
					{
						name: '开始时间',
						value: 'startTime'
					},
					{
						name: '结束时间',
						value: 'endTime'
					},
					{
						name: '文件大小',
						value: 'size'
					},
					{
						name: '视频时长',
						value: 'timeLength'
					}

				]
			}
		},
		computed: {
			...mapState({
				carInfo: state => state.bike.carInfo,
			}),
		},
		onLoad(options) {
			that = this;
			this.vehicleId = options.vehicleId
			this.vehicleNum = decodeURIComponent(options.vehicleNum)
			this.startTime = decodeURIComponent(options.startTime)
			this.endTime = decodeURIComponent(options.endTime)
			this.channelNo = decodeURIComponent(options.channelNo)
			uni.setNavigationBarTitle({
				title: this.vehicleNum
			})
			this.getHistoryVideo()
		},
		methods: {
			getHistoryVideo() {
				let that = this
				hwVehicleVideoApi
					.hwVehicleHistoryVideoList({
						vehicleId: this.vehicleId,
						channelNo: this.channelNo,
						startTime: this.startTime,
						endTime: this.endTime
					})
					.then((res) => {
						console.log(res)
						if (res.code == '200') {
							var list = res.data
							that.resultList.splice(0, that.resultList.length)
							for (var i in list) {
								var item = list[i]
								item.channelName = '通道' + item.channelNo
								if (item.startTime && item.endTime) {
									let dateDiff = uni.$xeu.getDateDiff(item.startTime, item.endTime)
									item.time = dateDiff.time
									if (dateDiff.time > 24 * 60 * 60 * 1000) {
										item.timeLength = '大于24小时'
									} else {
										var minuter = parseInt(dateDiff.time / (60 * 1000))
										var second = parseInt((dateDiff.time % (60 * 1000)) / 1000)
										if (minuter > 0) {
											item.timeLength = `${minuter}分${second}秒`
										} else {
											item.timeLength = `${second}秒`
										}
									}
								}
								that.resultList.push(item)
							}
						}
					})
			},

			onImgClick(item) {
				uni.showLoading({
					title: '获取资源中',
					mask: true
				})
				hwVehicleVideoApi.hwVehicleHistoryVideoUrl({
						vehicleId: this.vehicleId,
						channelNo: item.channelNo,
						startTime: item.startTime,
						endTime: item.endTime
					})
					.then((res) => {
						console.log('onPlayVideo', res)
						if (res.code == 200){
							if (res.data.url.ssl_flv && res.data.url.ssl_flv.length > 0) {
								this.videoData.src = res.data.url.ssl_flv 
								this.show = true
							}
						}
						
					}).finally(t=>{
						uni.hideLoading()
					})
			},
			close() {
				uni.showLoading({
					title: '视频关闭中',
					mask: true
				})

				this.videoShow = false
				this.show = false
			},
			open() {
				this.videoShow = true
			},
		}
	}
</script>

<style scoped>
	.detail-page {
		min-height: 100vh;
		padding: 24rpx;
		box-sizing: border-box;
		background: #F9F9FA;
	}

	.video {
		width: 600rpx;
		height: 400rpx;
	}
</style>